<script setup name="MenuTreeItem">
const { treeData, isRoot, currentDepth, maxDepth } = defineProps({
  treeData: {
    type: Array,
    default: () => [],
  },
  isRoot: {
    type: Boolean,
    default: true,
  },
  currentDepth: {
    type: Number,
    default: 1,
  },
  maxDepth: {
    type: Number,
    default: 3,
  },
})
</script>

<template>
  <template v-for="item in treeData" :key="item.index" :index="item.index">
    <el-sub-menu
      v-if="
        item.children && item.children.length > 0 && currentDepth < maxDepth
      "
      :index="item.path"
    >
      <template #title>
        <component class="icons" :is="item.icon"></component>
        <span>{{ item.label }}</span>
      </template>
      <MenuTreeItem
        :tree-data="item.children"
        :isRoot="false"
        :current-depth="currentDepth + 1"
        :max-depth="maxDepth"
      ></MenuTreeItem>
    </el-sub-menu>
    <el-menu-item v-else :index="item.path">
      <component class="icons" :is="item.icon"></component>
      <span>{{ item.label }}</span>
    </el-menu-item>
  </template>
</template>
